<template>
  <div class="join-addEdit">
    <el-dialog :append-to-body="true" :title="title" v-model="show" @close="cancelFun" :close-on-click-modal="false"
      destroy-on-close>
      <div class="wuliu-box">
        <el-checkbox-group v-model="selectProvince">
          <el-checkbox v-for="(item, index) in provinces" :key="index" :label="item.label"
            @change="selectFun($event, item.value)" />
        </el-checkbox-group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFun" size="large">取消</el-button>
          <el-button type="primary" @click="confirmFun" size="large">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, onMounted, ref, watch, defineEmits, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getCkAllSheng } from '@api/common'
import { updateShengcangku } from '@api/cangku'

const props = defineProps({
  id: {
    type: String,
    default: ""
  },
  data: {
    type: String,
    default: null
  },
  status: {
    type: String,
    default: null
  },
  show: {
    type: Boolean,
    default: null
  }
})

const emit = defineEmits(['hide'])

const title = computed(() => {
  return `编辑仓库代理省份`
})

// 添加或编辑
function confirmFun() {
  emit('hide', 'cancel')
}

function cancelFun() {
  emit('hide', 'cancel')
}

// 获取物流信息
const provinces = ref([])
const getCkAllShengFun = async () => {
  let res = await getCkAllSheng()
  if (res.code == 200) {
    provinces.value = res.data.map(v => {
      return {
        label: v.province,
        value: v.id
      }
    })
  }
}

const selectProvince = ref([])

const selectFun = async (e, value) => {
  let res = "";
  if (e) {
    res = await updateShengcangku({ id: value, cangkuid: props.id })
  } else {
    res = await updateShengcangku({ id: value, cangkuid: "" })
  }

  if (res.code == 200) {
    ElMessage({
      message: '操作成功!',
      type: 'success'
    })
    emit('hide', 'confirm')
  }
}

onMounted(() => { })

watch(
  () => props.show,
  (newValue, oldValue) => {
    getCkAllShengFun()
    selectProvince.value = props.data.map(v => v.province)
  },
  { deep: true }
)
</script>
<style lang="scss" scoped>
.wuliu {
  flex-grow: 2;
  padding: 0 20px;
  overflow-y: auto;
  box-sizing: border-box;

  .wuliu-item {
    margin-bottom: 20px;

    .time {
      margin-bottom: 5px;
    }

    .status {
      font-weight: bold;
    }
  }
}
</style>
